<template>
  <div class="geshoudetail">
    <!-- 歌手信息 -->
    <div class="geshouBack" :style="{
				backgroundImage: 'url('+backgroundImageUrl+')'
			}">
      <div class="geshou_info">
        <h3 class="geshou_name">{{geshouName}}</h3>
      </div>
      <div class="back"></div>
    </div>
    <!-- 歌曲列表 -->
    <van-list :offset="500" :immediate-check="false" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell v-for="item in musicList" :key="item.id" v-on:click="$router.push(`/play?id=${item.id}`)">
        <template>
          <div class="music_s">
            <div class="m_name">{{item.name}}</div>
            <div class="s_name">{{item.ar[0].name}}</div>
          </div>
        </template>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { getGeshouMusic, getGeshouDetail } from '../../../utils/api'
export default {
  name:'GeshouDetail',
  data () {
    return {
      loading: false,
      finished: false,
      // 歌曲列表
      musicList: [],
      // 每次限制的数量
      limit: 20,
      // 歌手详细信息
      artistsInfo: {},
      // 歌曲总数
      total: 0,
      // 每次开始的offset
      offset: 0,
      // 歌手id
      artistsId: this.$route.query.id,
			// 歌手背景图片
      backgroundImageUrl: '',
			// 歌手名称
			geshouName: ''
    }
  },
  methods: {
    // 获取歌手歌曲	
    async getGeshouMusicFn () {
      let result = await getGeshouMusic(this.artistsId, this.limit, this.offset);
      if (result.code === 200) {
        this.musicList = result.songs;
        this.total = result.total;
        this.finished = false;
      }
    },
    // 获取歌手详细信息
    async getGeshouDetailFn () {
      let result = await getGeshouDetail(this.artistsId);
      if (result.code === 200) {
        this.geshouName = result.data.artist.name;
        this.backgroundImageUrl = result.data.artist.cover;
      }
    },
    // 加载数据
    async onLoad () {
      // 异步更新数据
      let result = await getGeshouMusic(this.artistsId, this.limit, this.offset + this.limit);
      if (result.code === 200) {
        this.offset = this.offset + this.limit;
        this.musicList.push(...result.songs);
        // 加载状态结束
        this.loading = false;
      }
      // 数据全部加载完成
      if (this.musicList.length >= this.total) {
        this.finished = true;
      }
    },
  },
  mounted () {
    this.getGeshouMusicFn();
    this.getGeshouDetailFn();
  }
}
</script>

<style lang="less" scoped>
@import '../../css/vars.less';
	.geshoudetail{
		padding-top: 100/50rem;
		.geshouBack{
			padding: 50/50rem 0;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 500/50rem;
			position: relative;
		}
		.geshou_name{
			position: absolute;
			font-size: 50/50rem;
			font-weight: 520;
			margin: 0;
			left: 5%;
			color: #fff;
			top: 50/50rem;
		}
		.back{
			background-color: @backWhite;
			height: 100/50rem;
			position: absolute;
			left: 0;
			bottom: -1.4rem;
			border-radius: 50/50rem 50/50rem 0 0;
			width: 100%;
		}
	}
	.van-cell{
    height: 130/50rem;
    line-height: 1.4;
    .van-cell__value{
      .music_s{
        div:nth-child(1){
          font-size: 0.7rem;
        }
        div:nth-child(2){
          color: #888;
          font-size: 28/50rem;
        }
        &::before{
          content: "";
          position: absolute;
          right: 0;
          top: 50%;
          width: 0;
          height: 0;
          transform: translateY(-50%);
          display: inline-block;
          border: 20/50rem solid transparent;
          border-left-color: #ccc;
        }
      }
    }
  }
	.van-list{
    margin-bottom: 70/50rem;
		padding-top: 0.3rem;
    /deep/ .van-list__finished-text{
      height: 100/50rem;
      line-height: 70/50rem;
      font-size: 28/50rem;
    }
  }
</style>